<template>
    <payTable :tableData="tableData" :tableLoading="tableLoading" :columns="columns" align="center">
        <!-- 自定义头像 -->
        <template v-slot:imageUrl="{row}">
            <img :src="row.imageUrl" width="100">
        </template>

        <template v-slot:action="{row}">
            <!-- 自定义图标 -->
            <el-button type="success" class="payIcon" @click="goPreOrder(row)">
                <template #icon>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vip3" width="20"></use>
                    </svg>
                </template>
                <template #default>
                    点击充值
                </template>
            </el-button>
        </template>
    </payTable>
</template>

<script setup>
import * as api from "@/api/pay.js"
import payTable from "@/components/payTable/index.vue"
import { onMounted,ref } from "vue";
import { ElMessageBox,ElMessage } from "element-plus";
import { useRouter } from "vue-router";
let router = useRouter()
// 动态定义表头
let columns = [
    {
        label:"产品图片",
        prop:"imageUrl",
    },
    {
        label:"产品名称",
        prop:"productName",
        align:'left'
    },
    {
        label:"产品描述",
        prop:"description"
    },
    {
        label:"产品价格",
        prop:"price"
    },
    {
        label:"产品库存",
        prop:"inventory"
    },
    {
        label:"充值",
        prop:"action"
    }
]

// 声明一个数据，用于注入给表格
let tableData = ref([])
// 声明一个控制加载动画的变量
let tableLoading = ref(false)


// 获取产品
let getList = async () =>{
    // 开启动画
    tableLoading.value = true
    try{
        // 发起请求，请求vip数据
        let res = await api.getCategoryApi()
        console.log(res)
        // 将数据绑定到组件
        tableData.value = res.data.data.reverse()
        // 关闭动画
        tableLoading.value = false
    }catch(e){
        // 关闭动画
        tableLoading.value = false
        console.log(e)
        
    }
}
onMounted(()=>{
    getList()
})


// 跳转到下单页
let goPreOrder = (row) => {
    // 使用弹框提示用户，是否购买
    // 消息提示框
    ElMessageBox.confirm('此操作将进入'+row.productName +'的预支付页面，是否继续?','支付提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        })
        // 点击确定按钮
        .then(()=>{
            // 用户确认了
            // 直接获取当前产品的id，传递给下一个页面，跳转到预支付页面
            router.push({path:"/preOrder",query:{product_id:row.product_id}})
        })
        // 点击取消按钮
        .catch(()=>{
            ElMessage({
                message: '已取消删除',
                type: 'warning',
            })
        })
    
}
</script>


<script>
export default{
    meta:{
        title: 'vipCharge', 
        name: 'vip充值',
        routeName:"charge",
        icon:'#icon-chongzhi'
    }
}


</script>

